<template>
	<view class="mine">
		<myhead title="个人中心" v-if="flag"></myhead>
		<myhead title="个人中心" v-else :background="headF" color="black"></myhead>
		<view class="pic-top">
			<image :src="pic" class="topimg"> </image>
		</view>
		<view class="mine-box" v-if="userInfo">
			<view class="user">
				<view class="name">昵称: {{userInfo.nickName }}</view>
				<image class="avatar" :src="userInfo.avatarUrl" ></image>
			</view>
			<view class="lougout">
				<u-button class="logoutbtn" @click="logoutaction">退出登录</u-button>
			</view>
			<view class="list">
				<u-cell-group :border="true">
					<u-cell-item icon="weixin-fill" title="我的题目" value="10"></u-cell-item>
					<u-cell-item icon="thumb-up-fill" title="我的点赞" value="3"></u-cell-item>
					<u-cell-item icon="heart-fill" title="我的收藏" value="1"></u-cell-item>
					<u-cell-item icon="bag-fill" title="我的评论" value="7"></u-cell-item>
					<u-cell-item icon="clock-fill" title="我的足迹" value="9"></u-cell-item>
					<u-cell-item icon="bell-fill" title="我的积分" value="100"></u-cell-item>
					<u-cell-item icon="setting-fill" title="设置" ></u-cell-item>
					<u-cell-item icon="email-fill" title="清除缓存" ></u-cell-item>
				</u-cell-group>
			</view>
		</view>
		<view class="auth tada" @click="authLogin" v-else   >
			授权登录
		</view>
		
		<u-modal
			v-model="show"
		 content="你真的要退出登录吗"
		 title="退出警告"
		 @confirm="confirm"
		 confirm-color="#f50"
		 :show-cancel-button="true"
		 ></u-modal>
	</view>
</template>

<script>
	let db = wx.cloud.database()
	export default {
		data(){
			return {
				show:false,
				flag:true,
				pic0:"https://pics5.baidu.com/feed/8b82b9014a90f6039dc61aa012168a1db151edea.jpeg",
				pic:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-b3323a9a3eab4ef9ccde8c2b3677170b_r.jpg%3Fsource%3D1940ef5c&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639192020&t=97c562a9714e3ee3b5f595c4051fe416"
			}
		},
		methods:{
			logoutaction(){
				this.show = true;

			},
			confirm(){
				uni.setStorageSync('userInfo',null)
				this.changeUserInfo(null);	
			},
			authLogin(){
				uni.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success:res=>{
						console.log(res)
						let userInfo  = res.userInfo; 
						uni.setStorageSync("userInfo",res.userInfo);
						this.changeUserInfo(userInfo);
						
						// 存储到数据库
						uni.showLoading({title:"正在授权"})
						db.collection("wh07users")
						.where({
							nickName:userInfo.nickName
						})
						.get()
						.then(res=>{
							console.log(res)
							uni.hideLoading()
							uni.showToast({title:'授权成功'})
							if(!res.data.length>0){
								// 插入 
								db.collection("wh07users")
								.add({
									data:userInfo
								})
								.then(res=>{
									console.log(res)
								})
							}
						})
						
						uni.login({
							success:res=>{
								console.log(res)
								// ajax  
							}
						})
					}
				})
			}
		},
		// 监听页面滑动
		onPageScroll(obj){
			// console.log(obj)
			if(obj.scrollTop>100){
				this.flag = false
			}else{
				this.flag = true 
			}
		}
	}
</script>

<style lang="scss">

.mine{
	width:100%;
	background: #eee;
	min-height: 100%;
	.pic-top{
		width:100%;
		height:600rpx;
		overflow: hidden;
		.topimg{
			width:100%;
			height:1200rpx;
		}
	}
	.mine-box{
		width:100%;
		height:auto;
		padding:30rpx;
		margin-top:-400rpx;
		.user{
			display: flex;
			flex-direction: column;
			align-items: center;
			.name{
				color:#fff;
				text-align: center;
				font-size:40rpx;
				font-weight: bold;
			}
			.avatar{
				margin:30rpx auto 0;
				width:140rpx;
				height:140rpx;
				border-radius: 50%;
				
			}
		}
		.lougout{
			width:40%;
			margin:40rpx auto 0;
			
		}
		.list{
			margin-top:70rpx;
			border-radius: 15px;
			overflow: hidden;
		}
		.logoutbtn{
			width:100%;
			
			.u-btn--default{
				// background: transparent;
			}
		}
	}
	.auth{
		width:250rpx;
		height:250rpx;
		border-radius: 50%;
		background: linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63));
		margin: 140rpx auto 0;
		text-align: center;
		line-height: 250rpx;
		color:#fff;
		font-size: 40rpx;
		font-weight: bold;
	}
	.tada{
		animation: tada 1.9s 1s infinite;
	}
	.minebox{
		width:100%;
		height:1600rpx;
		background: #DD524D;
	}
}
</style>
